  <template>
    <div class="box">
      <div class="bg"></div>
      <van-nav-bar id="van-bar" :title="title" :border="border" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight">
        <template #left>
          <img :style="{ width: widthPx, height: heightPx }" src="@/assets/iconPerfectInformation/nav_back@2x.png" />
        </template>
        <template #right v-if="isshow1">
          重新申请
        </template>
      </van-nav-bar>

      <div class="album" :style="'top:' +
        (topheight + 60) +
        'px;height:calc(100vh - ' +
        (topheight + 60) +
        'px);width:100%;overflow:auto;'
        ">

        <div class="albumlist">

          <div class="title">姓名</div>
          <div class="input">
            <input placeholder="填写姓名" :disabled='isshow1' v-model="name" type="text">
          </div>
          <div class="title">身份证</div>
          <div class="input">
            <input placeholder="填写身份证" :disabled='isshow1' v-model="card" type="text">
          </div>



        </div>
      </div>
      <div class="bnt" v-if="!isshow1">
        <van-button type="primary" block @click="add()"
          color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">确认申请</van-button>
      </div>


    </div>
  </template>

  <script>
  import { Authentication } from "@/api/setting"
  import {parseTime,encryptName,encryptIdNo} from '@/utils/fun'
  export default {

    data() {
      return {
        border: "",
        widthPx: "28px",
        heightPx: "28px",
        topheight: 0,
        isActive: 0,
        isShow: false,
        title: '实名认证',
        isActive: 0,
        file: '',
        id: '',
        isshow: false,
        isshow1: false,
        loading: false,
        finished: false,
        card: '',
        name: '',
        service_label: [],
        haunt_place: '',
        showLabelViewPop: false,
        labelType: '',
        deldata: {
          album: ''
        },
        adddata: {
          albums: []
        },

        list: [

        ],
      };
    },
    mounted() {
      // console.log(this.$store.state.userInfo.is_merchant);
      // if(this.$store.state.userInfo.is_authentication==0){
      //   this.isshow=true
      // }
      // console.log(this.$store.state);
      // if(this.$store.state.userInfo.is_merchant==1){
      //   this.isshow1=true
      //   this.getImpressInfo()
      //   this.type='edit'
      // }else {
      //   this.type='add'
      // }
      // this.topheight = document.getElementById("van-bar").offsetHeight;
      // this.$nextTick(() => {

      //     this.getData()

      // })
    },

    methods: {



      onClickRight() {
        this.isshow1 = false
      },
      del(e) {

        delAlbumList(e
        ).then((res) => {

          console.log(res);
          this.getData()
          // 加载状态结束

        })
      },
      uploadImgSuccess(value) {
        this.adddata.albums = [...this.list, value.url]
        console.log(this.adddata);
        addAlbumList({ ...this.adddata }
        ).then((res) => {

          console.log(res);
          this.getData()
          // 加载状态结束

        })
        this.isBuddhaShow = false;
        this.isShow = false;
      },
      beforeRead(file) {
        this.isShow = false;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          this.$toast('请上传 jpg、png 格式图片');
          return false;
        }
        this.$nextTick(() => {
          this.file = file;
          console.log(this.file);
          this.isShow = true;
        })
        return true;
      },
      onClickLeft() {
        this.$router.back();
      },
      handleUploadSuccess(e) {
        console.log(e);
      },
      add() {
        let data = {
          name: this.name,
          card_id: this.card,
        }
        Authentication(data
        ).then((res) => {
          this.$toast('实名认证成功!');
          data.name = encryptName(data.name);
          data.card_id = encryptIdNo(data.card_id);
          data['date'] = parseTime(new Date(), '{y}年{m}月{d}日')
          this.$router.push({ path: '/attestation/success',query:{data} })
          // this.list = list.concat(...res.data.list)
          console.log(res);
          // 加载状态结束
        }).catch(err=>{
            //实名认证失败

        })
      },
      edit() {
        let data = {
          id: this.id,
          wechat: this.wechat,
          phone: this.phone,
          service_label: this.service_label,
          haunt_place: this.haunt_place
        }
        applybusiness(data
        ).then((res) => {

          // this.list = list.concat(...res.data.list)
          console.log(res);
          // 加载状态结束
        })
      },
      Apply() {
        if (this.type == 'add') {
          this.add()
        } else if (this.type == 'edit') {
          this.edit()
        }
      },
      qiehuan(e) {
        this.isActive = e
        this.getData()
      },
      onclose() {
        this.isShow = false;
      },
      getData() {


      },
    },
  };
  </script>

  <style scoped lang="scss">
  .input input {
    width: 343px;
    height: 60px;
    display: block;
    background: rgba(107, 133, 247, 0.3);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 14px;
    border-color: rgba(82, 117, 241, 0.30);
  }

  .title {
    margin: 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(26, 26, 26, 1);
  }

  .title1 {
    color: rgba(118, 118, 118, 1);
    font-size: 12px;
    padding-left: 10px;
    padding-top: 9px;
    margin-bottom: 25px;
  }

  .title3 {
    display: flex;
    line-height: 40px;
    height: 40px;
    margin-bottom: 30px;
    border-bottom: 1px rgba(216, 216, 216, 0.50) solid;
    justify-content: space-between;
  }

  .title3 .title {
    height: 40px;
    margin: 0;
  }

  .title3 input {
    height: 40px;
    text-align: right;
    border: 0;
  }

  .title4 {
    display: flex;
    line-height: 40px;
    height: 40px;
    justify-content: space-between;
  }

  .title4 .title {
    margin: 0;
  }

  .renzheng {
    background-color: rgba(250, 81, 81, 1);
    width: 52px;
    height: 20px;
    margin: 5px 8px;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    color: #FFFFFF;
  }

  .input3 {
    width: 71px;
    height: 20px;
    margin: 10px 0;
    border: 1px;
    background-color: rgba(231, 212, 255, 1);
    color: #8A38F5;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(138, 56, 245, 1);
    border-radius: 10px;
  }

  .input3 img,
  .tab img {
    width: 12px;
    height: 12px;
    vertical-align: text-bottoms;
  }

  .tab {
    margin-right: 8px;
    margin-bottom: 5px;
    background-color: rgba(231, 212, 255, 1);
    padding: 0 7px;
    border-radius: 10px;
  }

  .top {
    position: absolute;
    display: flex;
    height: 30px;
    line-height: 30px;
    justify-content: center;
    top: 0;
    left: 0;
    background-color: rgba(252, 219, 219, 1);
    width: 100%;
  }

  .sming {}

  .tab span {
    line-height: 21px;
    vertical-align: top;
    color: rgba(138, 56, 245, 1);
  }

  .tab img {
    display: inline-block;
    margin: 4px 5px;
    margin-right: 0;
    width: 12px;
    height: 12px;
  }

  .bnt {
    width: 343px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    line-height: 50px;
  }

  .glance {
    position: absolute;
  }

  .bg {
    width: 375px;
    height: 88px;
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, #CDE1FD 0%, rgba(255, 255, 255, 0) 100%);
  }

  .albumlist {
    width: 345px;
    position: relative;
    margin: 40px auto;
  }

  .list {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
  }



  .van-cell {
    background-color: transparent;
  }

  .van-cell::after {
    border-color: #d8d8d8;
  }

  .van-cell__value {
    color: #1a1a1a;
    font-weight: 500;
  }

  ::v-deep .van-uploader {
    display: block !important;

    & .van-uploader__wrapper {
      display: block !important;
    }
  }</style>
